<template>
  <div :style="getMenuSize" :class="styles.navigation">
    <ul>
      <li v-for="item in navigation">
        <template v-for="(label,index) in item">
          <a @click="openUrl(label.url)">{{label.label}}</a>
          <span v-if="index!==item.length-1">/</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
  import styles from './left.scss'
  import {NAVIGATION_MENU} from '@util/constant'

  export default {
    name: "navigation",
    components: {},
    model: {},
    props: {
      height: {
        type: Number,
        default: 450
      },
      width: {
        type: Number,
        default: 190
      },
      navigation: {
        type: Array,
        default: function () {
          return NAVIGATION_MENU
        }
      }
    },
    data() {
      return {
        styles
      }
    },
    computed: {
      getMenuSize: function () {
        return {height: this.height + 'px', width: this.width + 'px'}
      }
    },
    created: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      openUrl(url) {
        this.$router.push(url)
      }
    }
  }
</script>
